<template>
  <div class="board-table">
    <div class="board-table__header">
      <table>
        <colgroup>
          <col
            v-for="(item, index) in columns"
            :key="index"
            :width="item.width"
            :name="item.key"
          />
        </colgroup>
        <thead>
          <tr>
            <th
              v-for="(item, index) in columns"
              :key="index"
              class="font font--default"
            >
              <div>
                {{ item.title }}
              </div>
            </th>
          </tr>
        </thead>
      </table>

      <div class="line"></div>
    </div>

    <div
      class="scroll"
      :style="{
        'max-height': maxScrollHeight,
        height: scrollHeight,
      }"
    >
      <div class="board-table__body">
        <table>
          <colgroup>
            <col
              v-for="(item, index) in columns"
              :key="index"
              :width="item.width"
            />
          </colgroup>
          <tbody>
            <tr
              v-for="(item, index) in data"
              :key="index"
              :class="[index % 2 === 0 ? 'zb' : '']"
            >
              <td v-for="(col, clIdx) in columns" :key="`${col.key + clIdx}`">
                <slot :name="col.key" v-bind="{ $index: index, row: item }">
                  {{ getVal(item, col.key) }}
                </slot>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- </VScrollBar> -->
  </div>
</template>
<script>
export function getVal(form, s) {
  return s
    .replace(/\[(\w+)\]/g, ".$1")
    .replace(/^\./, "")
    .split(".")
    .reduce((prev, cur) => prev && prev[cur], form);
}
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    scrollHeight: {
      type: [Number, String],
      default: "100px",
    },
    maxScrollHeight: {
      type: [Number, String],
    },
  },
  data() {
    return {};
  },
  methods: {
    getVal,
  },
};
</script>
<style lang="scss" scoped>
.scroll {
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

table {
  width: 100%;
  table-layout: auto;
  color: white;
  //   border-collapse: collapse;
  border-spacing: 0 0.1rem;
  border-collapse: separate;

  thead {
    th {
      font-size: 0.16rem;
      color: #afbed8;

      > div {
        height: 100%;
        display: flex;

        align-items: center;
      }
    }
  }
  tbody td {
    box-sizing: border-box;
    height: 0.38rem;
    font-size: 0.14rem;
    padding: 0.05rem;
    border: none;
    color: #afbed8;
    // 覆盖全局的 字体样式
    // font-family: initial;
    // color: rgba(255, 255, 255, 0.8);
  }
}

.zb {
  background-color: rgba(69, 168, 255, 0.05);
}

.board-table {
  position: relative;

  &__header {
    position: relative;

    padding: 0 0.1rem;
    background-size: 100% 100%;
    // background-position: -0.03rem 0;
    background-image: url("@/assets/screen/thd.png");
  }

  &__body {
    padding: 0 0.05rem;
    tr {
      background-size: 100% 100%;
      background-image: url("@/assets/screen/td1.png");
    }
  }
}
</style>
